<!DOCTYPE html>
<html id="root-element">
<style>
    #large-box {
        position: absolute;
        top: 10px;
        left: 500px;
        width: 100px;
        height: 100px;
        background-color: magenta;
    }

    #small-box {
        position: absolute;
        top: 35px;
        left: 525px;
        width: 50px;
        height: 50px;
        background-color: yellow;
    }
</style>
<script src="../include.js"></script>
<div id="large-box"></div><div id="small-box"></div>
<script>    
    test(() => {
        println(`Negative coordinates return null: ${document.elementFromPoint(-1, -1) === null}`);
        println(`Coordinates outside the viewport return null: ${document.elementFromPoint(99999, 99999) === null}`);
        printElement(document.elementFromPoint(0, 0));
        printElement(document.elementFromPoint(500, 10));
        printElement(document.elementFromPoint(550, 60));        
    });
</script>
</html>
